<template>
    <div>
        <navbar></navbar>
        <van-form @submit="onSubmit">
            <div style="text-align:center">
                <img :src="require('@/assets/logo.png')" />
            </div>
        <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :error-message="unmsg"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :error-message="pwmsg"
        />
        <van-field 
            v-model="telphoneNo"
            type="tel"
            name="手机号码"
            label="手机号码"
            placeholder="手机号码"
            :error-message="telmsg"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :disabled="isDisabled">提交</van-button>
        </div>
        </van-form>
    </div>
</template>
<script>
import navbar from '@/components/utils/navbar/m-navbar'
export default {
    components:{
        'navbar':navbar,
    },
    data() {
        return {
        username: '',
        password: '',
        telphoneNo:'',
        unmsg:'',
        pwmsg:'',
        telmsg:'',
        isDisabled:true,
        unIsPass:false,
        pwIspass:false,
        tlIspass:false,
        };
    },
    created(){
       this.setButton();
    },
    methods: {
        setButton(){
            if(this.unIsPass && this.pwIspass&&this.tlIspass){
                this.isDisabled=false;
            }
        },
        onSubmit(values) {
            console.log('onLogin',this.username+"     "+this.password);
        }
    },
    watch:{
        username(){
            var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{6,15}$/;
            this.unIsPass=false;
            if(this.username.length == 0){
                this.unmsg="用户名不能为空";
                return;
            }
            if(reg.test(this.username)){
                this.unmsg="";
                this.unIsPass=true;
                this.setButton();
                return;
            }
            this.unmsg="用户名格式不正确";
        },
        password(){
            this.pwIspass=false;
            var reg = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*.,]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*.,]+$)(?![\d!@#$%^&*.,]+$)[a-zA-Z\d!@#$%^&*.,]{6,18}$/;
            if(this.password.length == 0){
                this.pwmsg="密码不能为空";
                return;
            }
            if(reg.test(this.password)){
                this.pwmsg="";
                this.pwIspass=true;
                this.setButton();
                return;
            }
            this.pwmsg="密码格式不正确";
        },
        telephoneNo(){
            this.tlIspass=false;
            var reg =/^1[3456789]\d{9}$/;
            if(this.telephoneNo.length == 0){
                this.telmsg="手机号不能为空";
                return;
            }
            if(reg.test(this.telephoneNo)){
                this.telmsg="";
                this.tlIspass=true;
                this.setButton();
                return;
            }
            this.telmsg="手机号格式不正确";
        }
    }
};
</script>